<template>
  <div class="Home">
    <myhead></myhead>
    <van-sticky z-index="999">
      <div class="contain">
        <i class="iconfont iconjiantou1"></i>
      </div>
    </van-sticky>
    <van-tabs v-model="active" sticky>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <van-tab :title="item.name" v-for="item in ListTab" :key="item.id">
            <mylove :info="info" @infoId="infoId"></mylove>
          </van-tab>
        </van-list>
      </van-pull-refresh>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      ListTab: [],
      info: [],
      loading: false,
      finished: false,
      pageIndex: 0,
      count: 0,
      isLoading: false,
    };
  },
  created() {
    this.getTabList();
    this.loading = true;
  },
  methods: {
    async getTabList() {
      const res = await this.$axios.get("/category");
      console.log(res);
      this.ListTab = res.data.data;
      console.log(this.ListTab[this.active].id);
      this.getinfo(this.ListTab[this.active].id);
    },
    async getinfo(id) {
      console.log(this.pageIndex);
      this.pageIndex++;
      const res = await this.$axios.get("/post", {
        params: {
          category: id,
          pageIndex: this.pageIndex,
          pageSize: 10,
        },
      });
      this.info = [...this.info, ...res.data.data];
      console.log(this.info);
      this.loading = false;
      this.isLoading = false;
      if (res.data.data.length < 10) {
        this.finished = true;
      }
    },
    onLoad() {
      console.log("我打牌了");

      this.getinfo(this.ListTab[this.active].id);
    },
    onRefresh() {
      console.log("我拉区了");
      this.pageIndex = 0;
      this.info = [];
      this.finished = false;
      this.loading = true;
      this.getinfo(this.ListTab[this.active].id);
    },
    infoId(id) {
      console.log(id);
      this.$router.push(`detail/${id}`);
    },
  },
  watch: {
    active(newValue) {
      console.log(newValue);
      this.loading = true;
      console.log(123);
      this.pageIndex = 0;
      this.finished = false;
      this.info = [];
      this.getinfo(this.ListTab[newValue].id);
    },
  },
};
</script>

<style scoped lang='less'>
.Home {
  /deep/ .van-tabs__nav {
    background-color: grey;
    margin-right: 40px;
    height: 50px;
  }
  /deep/ .contain {
    z-index: 999;
    position: absolute;
    right: 0;
    width: 40.5px;
    height: 44px;
    background-color: grey;
    text-align: center;
    line-height: 44px;
    .iconfont {
      font-size: 20px;
    }
  }
}
</style>